const fs = require('fs')
const path = require('path')
const marked = require('marked')
const browserSync = require('browser-sync')

// 1. 读取 md,css文件内容
// 2. 将上述读取出来的内容替换占位符,生成一个最终需要展示的 html 字符串
// 3. 将上述的html字符串写入到指定 html 文件中
// 4. 监听md文档内容的变化，然后更新 html 内容
// 5. 使用browser-sync插件实时刷新显示 html 内容


let mdPath = path.join(__dirname, process.argv[2])
let cssPath = path.resolve('github.css')
let htmlPath = mdPath.replace(path.extname(mdPath), '.html')

console.log(mdPath)
console.log(cssPath)
console.log(htmlPath)

fs.watchFile(mdPath, (cur, pre) => {
  if (cur.mtime !== pre.mtime) {
    fs.readFile(mdPath, 'utf-8', (err, data) => {
      //将md文件 -> html
      let htmlStr = marked.marked(data)
      fs.readFile(cssPath, 'utf-8', (err, data) => {
        let retHtml = temp.replace('{{content}}', htmlStr).replace('{{style}}', data)
        //将上述内容写入到指定的html文件中，用于在浏览器中进行展示
        fs.writeFile(htmlPath, retHtml, err => {
          console.log('html 生成成功')
        })
      })
    })
  }
})

browserSync.init({
  browser: '', //默认浏览器
  server: __dirname,
  watch: true,
  Index: path.basename(htmlPath)
})


const temp = `<html>
<head>
<style>
{{style}}
</style>
</head>
<body>
<div>{{content}}</div>
</body>
</html>`          